<template>
  <view class="LeaseIndex">
    <view class="material-header" align="left">
      <!-- <image class="material-header-img" style="width: 50px; height: 50px;" fit="contain" :src="img"/> -->
      <van-search class="material-header-search" v-model="value" placeholder="搜索门店名称" background="none"/>
    </view>
    <view>
     <!-- <swipe autoplay="true" style="height: 10rem;width: 400px;">
        <swipe-item v-for="(image, index) in images" :key="index">
          <image :src="image" />
        </swipe-item>
      </swipe> -->
	  <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
	  	<swipe-item v-for="(image, index) in images" :key="index">
	  	  <image :src="image" />
	  	</swipe-item>
	  </swiper>
	  
    </view>
    <view class="material-list" style="text-align: center">
      <van-icon  class="anniu" name="bars" size="25" @click="toCategory"/>
      <van-tabs  @click="onClick" style="text-align: left;margin: -40px 0px 0px 0px">
        <van-tab title="推荐" align="left" style="padding: 0.6rem">
          <view class="material-list-grid" v-for="(rental,index) in this.rentalList" :key="index" @click="toDetails(rental.rentalId)" style="margin-right: 10px;">
            <image height="10rem" fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg" style="width: 160px;height: 160px;"/>
            <view class="material-list-grid-content">
              <view align="left" style="background-color: gainsboro;border-radius: 1rem">
                <image style="float: left;margin-top: 0.25rem;margin-left: 0.5rem;width: 20px; height: 20px; border-radius: 50px;" round width="1rem" height="1rem" fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg"/>
                <view style="padding: 0;height: 1.5rem;line-height: 1.55rem;font-size: 0.6rem">专业{{rental.teamName}}{{rental.rentalRegion}}直营</view>
              </view>
              <view align="left">
                <view>{{rental.rentalName}}</view>
                <view>{{rental.rentalRegion}}专卖</view>
              </view>
              <view align="left">
                <view>
                  <text style="color: goldenrod;background-color: #2c3e50;padding: 0.1rem;border-radius: 0.2rem">市场价</text>
                  <text style="font-weight: bolder;font-size: 1rem">￥{{rental.rentalPrice}}</text>
                </view>
                <!--              <view><text>市场价:</text><text>￥{{c.price}}</text></view>-->
              </view>
            </view>
          </view>
        </van-tab>
        <van-tab v-for="(team,index) in this.leaseList" :name="team.teamId" :title="team.teamName" :key="index" align="left" style="padding: 0.6rem">
          <view class="material-list-grid" v-for="(rental,index) in rentalList" :key="index" @click="toDetails(rental.rentalId)" style="margin-right: 10px;">
            <image height="10rem" fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg" style="width: 160px;height: 160px;"/>
            <view class="material-list-grid-content">
              <view align="left" style="background-color: gainsboro;border-radius: 1rem">
                <image style="float: left;margin-top: 0.25rem;margin-left: 0.5rem;width: 20px; height: 20px; border-radius: 50px;" round width="1rem" height="1rem" fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg"/>
                <view style="padding: 0;height: 1.5rem;line-height: 1.55rem;font-size: 0.6rem">专业{{rental.team.teamName}}直营</view>
              </view>
              <view align="left">
                <view>{{rental.rentalName}}</view>
                <view>{{rental.rentalRegion}}专卖</view>
              </view>
              <view align="left">
                <view>
                  <text style="color: goldenrod;background-color: #2c3e50;padding: 0.1rem;border-radius: 0.2rem">市场价</text>
                  <text style="font-weight: bolder;font-size: 1rem">￥{{rental.rentalPrice}}</text>
                </view>
                <!--              <view><text>市场价:</text><text>￥{{c.price}}</text></view>-->
              </view>
            </view>
          </view>
        </van-tab>
      </van-tabs>
    </view>
  </view>
</template>

<script>

  import {
    getLeaseList,
    selectRentalServiceList
  } from '@/api/constructionTeam/rental.js'

  export default {
    data() {
      return{
        leaseList: [],
        value: '',
        img: "https://img.yzcdn.cn/vant/cat.jpeg",
        images: [
          'https://img.yzcdn.cn/vant/apple-1.jpg',
          'https://img.yzcdn.cn/vant/apple-2.jpg',
        ],
        rentalList:[],
      }
    },
    created() {
      this.getList();
      this.onClick(0,"推荐");
    },
    methods: {
      toCategory(){
        //this.$router.push({path:"/material_category",query:{materialId:this.categoryType}});
		uni.navigateTo({
			 	url:'/pages/index_team_category/index_team_category?typeid=3'
		})
      },

      // 查询建房主材类别列表
      getList(){
        getLeaseList().then((res) => {
			console.log(res.data.data)
          this.leaseList = res.data.data;
        });
      },
      onClick(name, title) {
        selectRentalServiceList(name).then((res) => {
          this.rentalList = res.data.data;
        });
      },
	  //商品详情页面  跳转还没有   补充值
	  
      toDetails(rentalId){
       // this.$router.push({path:"/RentalDetails",query:{rentalId:rentalId}});
		uni.navigateTo({
			url:"/pages/index_leaseserve/RentalDetails?rentalId="+rentalId
		})
      }
    },
  }
</script>

<style scoped>
	swiper image{
		width: 100%;
	}
  .material-header-img{
    margin-left: 1rem;
  }
  .material-header-search{
    float: right;
    margin: 0.2rem 0.5rem 0 0;
  }
  .material-list-grid{
    display: inline-block;
    width: 46%;
    padding: 0.4rem;
  }

  .anniu{
    /*height: 0rem;*/
    left: 10rem;
    top: 0rem;
    position: relative;
    z-index: 999999;
    background-color: whitesmoke;
  }
</style>
